<template>
  <div class=".mobile-device-content">
    <div class="panel-nav">
<!--      <a href="#" v-show="!panelSearchFull" @click="handleSearchFull">全文检索</a>-->
      <a href="#" v-show="!panelSearchAdvanced" @click="handleSearchAdvanced">高级搜索</a>
      <a href="#" v-show="!panelSearchTrace" @click="handleSearchTrace">追溯码查询</a>
    </div>
    <Row :gutter="4" v-show="panelSearchFull">
      <Col span="8">
        <Input search enter-button placeholder="全文搜索，请输入关键字" @on-search="handleSearch" v-model="queryObj.keyword"/>
      </Col>
    </Row>
    <Row :gutter="4" v-show="panelSearchTrace">
      <Col span="8">
        <Input search enter-button placeholder="请输入追溯码" @on-search="handleSearch" v-model="queryObj.traceCode"/>
      </Col>
    </Row>
    <Row :gutter="4" v-show="panelSearchAdvanced">
      <Col span="2">
        <Select placeholder="设备类型" v-model="queryObj.type">
          <Option value="">全部</Option>
          <Option value="0">采集站</Option>
          <Option value="1">存储</Option>
          <Option value="2">采集客户端</Option>
        </Select>
      </Col>
      <Col span="3">
        <Input placeholder="设备编号" v-model="queryObj.code"/>
      </Col>
      <Col span="3">
        <Input placeholder="名称" v-model="queryObj.name"/>
      </Col>
      <Col span="2">
        <Input placeholder="简称" v-model="queryObj.shotName"/>
      </Col>
      <Col span="2">
        <Input placeholder="组织机构" v-model="queryObj.orgId"/>
      </Col>
      <Col span="2">
        <Input placeholder="用户" v-model="queryObj.userId"/>
      </Col>
<!--
      <Col span="2">
        <Select placeholder="类型" v-model="queryObj.dataType">
          <Option value="">全部</Option>
          <Option value="请求">请求</Option>
          <Option value="请求">返回</Option>
        </Select>
      </Col>
      <Col span="2">
        <Select placeholder="级别" v-model="queryObj.level">
          <Option value="">全部</Option>
          <Option value="INFO">INFO</Option>
          <Option value="ERROR">ERROR</Option>
        </Select>
      </Col>
-->
      <Col span="6">
        <DatePicker v-model="dateTime" type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="开始时间 ~ 结束时间" style="width: 100%"></DatePicker>
      </Col>
      <Col span="2">
        <Button type="primary" @click="handleSearch()">查询</Button>
      </Col>
    </Row>
    <div class="panel-count">
      共 <span class="count-number">{{this.total.toLocaleString()}}</span> 条数据({{this.spendTime}} 秒)
    </div>
    <Card>
      <tables :loading="loading" stripe :row-class-name="rowClassName" ref="tables" v-model="tableData" :columns="columns"/>
      <Page class="panel-page" :total="total" :current="page" :page-size="size" @on-change="changePage" show-elevator />
    </Card>

    <div>
      <Modal
        v-model="modelData"
        title="数据"
        footer-hide="true"
        @on-ok="ok"
        @on-cancel="cancel">
        <pre>{{this.data}}</pre>
      </Modal>
    </div>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { queryPage } from '@/api/MobileDevice'
import expandRow from '@/components/wyf/table-expand.vue'
import {apiResult} from "@/libs/util";
export default {
  name: 'MobileDevice',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        { title: '编号', key: 'code', sortable: true, width: 175 },
        { title: '名称', key: 'name', sortable: false, width: 150 },
        { title: '简称', key: 'shotName', sortable: false, width: 150 },
        { title: '组织机构id', key: 'orgId', sortable: false, width: 120 },
        { title: '用户id', key: 'userId', sortable: false, tooltip: true },
        { title: '国标服务器id', key: 'gbServerId', sortable: false, tooltip: true },
        { title: '默认视频通道', key: 'defaultChannel', sortable: false, width: 175 },
        { title: '默认报警通道', key: 'defaultAlarmChannel', sortable: false, width: 175 },
        {
          title: '数据',
          key: 'action',
          width: 90,
          render: (h, params) => {
            console.log("params:");
            console.log(params);
            console.log("h:");
            console.log(h);
            return h('div', [
              h('button', {
                style: {
                  width: '50px',
                  height: '30px',
                  borderRadius: '5px'
                },
                class: 'log_data',
                dataClipboardText: params.row,
                on: {
                    click: () => {
                      let data = params.row;
                      this.data = '无数据'
                      if (data !== null) {
                        //this.data = JSON.parse(data)
                        this.data = data;
                      }
                      this.modelData = true
                    }
                }
              }, '查看'),
              h('button',{},'编辑')
            ])
          }
        }
      ],
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      spendTime: 0,
      dateTime: [],
      queryObj: {
        param: {
          page: {
            current: 1,
            desc: ['create_time'],
            maxLimit: 10000,
            optimizeCountSql: true,
            pages: 0,
            searchCount: true,
            size: 10,
            total: 0
          },
          where: {
            type: 2
          }
        },
        keyword: '',
        traceCode: '',
        deviceType: '',
        deviceCode: '',
        lawCameraCode: '',
        ip: '',
        method: '',
        dataType: '',
        level: '',
        startDateTime: '',
        endDateTime: ''
      },
      modelData: false,
      data: {},
      panelSearchFull: false,
      panelSearchAdvanced: false,
      panelSearchTrace: false,
      loading: false
    }
  },
  methods: {
    // 获取数据
    getData () {
      this.loading = true
      this.queryObj.param.page.pages = this.page;
      this.queryObj.param.page.size = this.size;
      this.queryObj.param.page.current =  this.queryObj.param.page.pages * this.queryObj.param.page.size;

      const param = JSON.stringify(this.queryObj.param)
      //console.log(param);
      queryPage(param).then(res => {
          apiResult(res.data,false,result=>{
            console.log(res.data.data);
            this.total = res.data.data.total;
            this.page = res.data.data.pages;
            //this.spendTime = res.data.data.spendTime
            this.tableData = res.data.data.records;
            this.loading = false;
          });
        /*console.log(res);
        const code = res.data.code;
        // console.log(res.data)
        if (code === 0) {
          console.log(res.data.data);
          this.total = res.data.data.total;
          this.page = res.data.data.pages;
          //this.spendTime = res.data.data.spendTime
          this.tableData = res.data.data.records;
          this.loading = false;
        } else {
          console.log(res.msg);
          this.$Message.error(res.msg)
        }*/
      })
    },
    // 点击页码
    changePage (page) {
      this.page = page
      this.getData()
    },
    handleSearch () {
      this.page = 1
      if (this.dateTime.length === 2) {
        this.queryObj.startDateTime = this.dateTime[0]
        this.queryObj.endDateTime = this.dateTime[1]
      }
      this.getData()
    },
    rowClassName (row, index) {
      // console.log(row.level)
      if (row.level === 'ERROR') {
        return 'error'
      }
      return ''
    },
    handleSearchAdvanced () {
      this.panelSearchAdvanced = true
      this.panelSearchFull = false
      this.panelSearchTrace = false
    },
    handleSearchFull () {
      this.panelSearchAdvanced = false
      this.panelSearchFull = true
      this.panelSearchTrace = false
    },
    handleSearchTrace () {
      this.panelSearchAdvanced = false
      this.panelSearchFull = false
      this.panelSearchTrace = true
    }
  },
  mounted () {
    this.page = 1
    this.getData()
    this.handleSearchAdvanced()
  }
}
</script>

<style lang="less">
  @import "MobileDevice";
  .ivu-table .error td{
    color: red;
  }
  .expand-key {
    font-weight: bold;
  }
</style>
